<template>
  <div class="introduce" v-show="curPageShow">
      <div class="goBack" @click="goBack"><img src="../assets/img/goBackBtn.png" alt=""></div>
    <div class="title ainimated zoomIn">
        <div class="l ainimated flash">
            <img src="../assets/img/dot_lt.png" alt="">
            <img src="../assets/img/dot_lb.png" alt="">
        </div>
        <div class="m">
            <img :src="activeDrink.titleSrc" alt="">
        </div>
        <div class="r ainimated flash">
            <img src="../assets/img/dot_rt.png" alt="">
            <img src="../assets/img/dot_rb.png" alt="">
        </div>
    </div>

    <div class="img" @click="goDrinking">
        <img class="dink_item ainimated tada" :src="activeDrink.successSrc" alt="">
        <img class="finger_text finger_move" src="../assets/img/finger_text.png" alt="">
    </div>

    <ul class="drinkDosing">
        <li v-for="(item,index) in activeDrink.step" :key="index">
            <img :src="item.dosing" alt="">
        </li>
    </ul>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'introduce',
        mixins:[preLoadImg],
        data(){
            return{

            }
        },
        computed:{
            ...mapGetters(['activeDrink'])
        },
        methods:{
            goDrinking(){
                this.$store.dispatch('switchPage','drink')
            },
            goBack(){
                this.$store.dispatch('switchPage','drinkList')
            }
        },
        mounted(){
            this.preLoadImg()
        }
    }
</script>

<style scoped lang="scss">
    .introduce{
        position: relative;
        width: 100%;
        height: 100%;
        background: url('../assets/img/make_explain.jpg') no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed; 

        .goBack{
            position: absolute;
            top:1%;
            left:2%;
            width:15%;
            opacity: 0.6;
            img{
                width:100%;
            }
        }

        .title{
            $width:70%;
            position: absolute;
            top:11%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count: 2;
                animation-duration:2s;
                animation-delay:2s;
            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:20%;}
        }
        .img{
            $width:40%;
            position: absolute;
            top:16%;
            left:50%;
            margin-left:-20%;
            width:$width;
            height:45%;
            text-align: center;
            .dink_item{
                height:90%;
                animation-iteration-count: infinite;
                animation-duration:2s;
            }

            .finger_text{
                position: absolute;
                right:-5%;
                bottom:20%;
                width:40px;
                height:30px;
            }
        }
        .drinkDosing{
            $width:80%;
            position: absolute;
            bottom:12%;
            left:50%;
            margin-left:-$width/2;
            width:$width;
            display: flex;
            justify-content: space-around;
            li{
                list-style: none;
                img{width:100%;}
            }
        }

    }
</style>


